<template>
  <div class="main">
    <div class="card-list">
      <div class="card red">
        用户数量：
        <dv-decoration-9 style="width:80px;height:80px;">2</dv-decoration-9>
      </div>
      <div class="card greed">
        今日订单数：
        <dv-decoration-9 style="width:80px;height:80px;">1</dv-decoration-9>
      </div>
      <div class="card blue">
        订单数量：
        <dv-decoration-9 style="width:80px;height:80px;">22</dv-decoration-9>
      </div>
      <div class="card deongaree">
        商品数量：
        <dv-decoration-9 style="width:80px;height:80px;">233</dv-decoration-9>
      </div>
    </div>
    <div class="datav-w">
      <div class="title">今日文章排名：</div>
      <div class="datav">
        <dv-scroll-ranking-board :config="config" style="width:500px;height:300px" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      config: {
        data: [
          {
            name: "关羽",
            value: 55,
          },
          {
            name: "张飞",
            value: 120,
          },
          {
            name: "赵云",
            value: 78,
          },
          {
            name: "马超",
            value: 66,
          },
          {
            name: "黄忠",
            value: 80,
          },
          {
            name: "魏延",
            value: 45,
          },
          {
            name: "姜维",
            value: 29,
          },
        ]
      },
    };
  },
  methods: {},
  mounted() {
    console.log("生命周期mounted");
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../css/home.scss";
</style>
